<template>
  <div class="user-list">
    <search-list
      ref="creatorList"
      :api-url="$url.CreatorList"
      :option="searchOpt"
      :itemPerRow="6"
      :beforeQuery="beforeQuery"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="uuid" label="uuid"></el-table-column>
      <el-table-column prop="showid" label="ID"></el-table-column>
      <el-table-column prop="nickname" label="昵称" width="120">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" class="avatar" />
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column label="身份认证">
        <template slot-scope="scope">
          <span>
            {{
              $selectFormat['identifiedShow'](
                scope.row.jmPerson + '' + scope.row.jmTeam + scope.row.ktTeacher,
              ).label
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="fansCnt" label="粉丝数"></el-table-column>
      <el-table-column prop="workCnt" label="作品发布数"></el-table-column>
      <el-table-column prop="viewCnt" label="作品浏览量"></el-table-column>
      <el-table-column prop="likeCnt" label="作品被点赞数"></el-table-column>
      <el-table-column prop="commentCnt" label="作品被评论数"></el-table-column>
      <el-table-column prop="favoredCnt" label="作品被收藏量"></el-table-column>
      <el-table-column prop="shareCnt" label="作品被分享量"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="text" @click="delCreators(scope.row)">移除</el-button>
          <el-button type="text" v-if="scope.row.isTop" @click="isTop(scope.row)">
            取消置顶
          </el-button>
          <el-button type="text" v-else @click="isTop(scope.row)">置顶</el-button>
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button type="primary" @click="dialogVisible = true">
          添加创作者
        </el-button>
        <el-button type="primary" @click="delCreators" :disabled="scope.selectedData.length == 0">
          移除创作者
        </el-button>
      </div>
    </search-list>
    <el-dialog
      :visible="dialogVisible"
      title="选取创作者"
      center
      width="60%"
      @close="dialogVisible = false"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <search-list
        ref="userList"
        :api-url="$url.CreatorAll"
        :option="userSearchOpt"
        :itemPerRow="6"
        @selection-change="userSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="uuid" label="uuid"></el-table-column>
        <el-table-column prop="showid" label="ID"></el-table-column>
        <el-table-column prop="nickname" label="昵称">
          <template slot-scope="scope">
            <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" class="avatar" />
            <span>{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button type="text" @click="addCreators(scope.row)">选取这一个</el-button>
          </template>
        </el-table-column>
        <div slot="btn-after" class="btn-after">
          <el-button type="primary" @click="addCreators" v-if="dialogSelectedData.length !== 0">
            选择{{ dialogSelectedData.length }}个
          </el-button>
        </div>
      </search-list>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // dialog
        dialogVisible: false,
        // 多选
        selectedData: [],
        // dialog多选
        dialogSelectedData: [],
        // 所有用户筛选
        userSearchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '昵称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'showid',
            label: 'ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'uuid',
            label: 'uuid',
          },
          {
            type: 'creatorListHasWorkSl',
            name: 'hasWork',
            label: '所有用户',
          },
        ],
        // 创造者筛选
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '昵称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'showid',
            label: 'ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'phone',
            label: '手机号码',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'uuid',
            label: 'uuid',
          },
          {
            type: 'identifiedSl',
            name: 'identified',
            label: '身份认证',
          },
          {
            type: 'creatorListSortSl',
            name: 'sort',
            label: '排序',
          },
          // {
          //   type: 'el-date-picker',
          //   name: 'updatedAt',
          //   $attrs: {
          //     // 配置日期筛选的快捷键
          //     'picker-options': {
          //       shortcuts: [
          //         {
          //           text: '最近一周',
          //           onClick(picker) {
          //             const end = new Date();
          //             const start = new Date();
          //             start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          //             picker.$emit('pick', [start, end]);
          //           },
          //         },
          //       ],
          //     },
          //     type: 'daterange',
          //     format: 'yyyy-MM-dd',
          //     'value-format': 'yyyy-MM-dd',
          //     'start-placeholder': '开始日期',
          //     'end-placeholder': '结束日期',
          //   },
          // },
        ],
      };
    },
    methods: {
      // 详情
      detail(row) {
        const { uuid } = row;
        this.$tabs.open({ name: 'UserManagerDetail', params: { uuid } });
      },
      // 置顶
      isTop(val) {
        this.$service.CreatorTopToggle({ uid: val.uuid }).then((res) => {
          this.$message.success('操作成功！');
          this.$refs.creatorList.getList();
        });
      },
      // 添加创作者
      addCreators(val) {
        this.$confirm('确定要将选中的用户加入创作者列表吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$service
              .CreatorAdd({
                uids:
                  this.dialogSelectedData.length > 0
                    ? this.dialogSelectedData
                        .map((item) => {
                          return item.uuid;
                        })
                        .join(',')
                    : val.uuid,
              })
              .then((res) => {
                this.$message.success('创作者添加成功！');
                this.dialogVisible = false;
                this.$refs.creatorList.getList();
              });
          })
          .catch(() => {});
      },
      // 移除创作者
      delCreators(val) {
        this.$confirm('确定要将选中的用户从创作者列表移除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$service
              .CreatorRemove({
                uids: val.uuid
                  ? val.uuid
                  : this.selectedData
                      .map((item) => {
                        return item.uuid;
                      })
                      .join(','),
              })
              .then((res) => {
                this.$message.success('创作者移除成功！');
                this.$refs.creatorList.getList();
              });
          })
          .catch(() => {});
      },
      // 多选
      selectionChange(val) {
        this.selectedData = [...val];
      },
      // dialog多选
      userSelectionChange(val) {
        this.dialogSelectedData = [...val];
      },
      beforeQuery({ searchInfo }) {
        searchInfo.jmPerson = 0;
        searchInfo.jmTeam = 0;
        searchInfo.ktTeacher = 0;
        if (searchInfo.identified) {
          var identifies = searchInfo.identified.split(',');
          identifies.forEach((identify) => {
            searchInfo.jmPerson = identify == 'jmPerson' ? 1 : 0;
            searchInfo.jmTeam = identify == 'jmTeam' ? 1 : 0;
            searchInfo.ktTeacher = identify == 'ktTeacher' ? 1 : 0;
          });
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .avatar {
    display: inline-block;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
  }
  // dialog
</style>
